<!DOCTYPE html>
<html>

	<head>
		<meta charset='utf-8' />
		<title>箩筐</title>
		<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
		<script>
            var docEl = document.documentElement;
            var clientWidth = docEl.clientWidth;
            var radio = clientWidth/750;
            docEl.style.fontSize = (radio * 100) + "px";
		</script>
		<link rel="stylesheet" type="text/css" href="css/poiContent.css" />
	</head>

	<body>

		<div id='map'>
			<div class="btns">
				<div class="refresh-btn" onclick="refreshPoi()">
					<img src="img/refresh1.png" />
				</div>
				<div class="location-btn" onclick="setLocation()">
					<img src="img/position1.png" />
				</div>
			</div>
		</div>
        <div id="loading" class="loading" style="display: none;">
            <img src="img/poicontent/loading.gif">
        </div>
		<script src="js/Config.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/lk.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var urlStr = location.href;
			var arr = getQueryString(urlStr);
			var position_lat = arr["poslat"] || '39.912954';
			var position_lng = arr["poslng"] || '116.452207';
            // 初始化中心点
            var initCenter = [position_lng,position_lat];
			console.log(initCenter);
            //定位点
			var posCenter = null;
			var map = null;
			var poiContentManager = null;
			var mapLoaded = false;

            getLocation();
			initMap(initCenter,3);

			function initMap(center,zoom) {
				map = new LK.Map({
					container: 'map',
                    style: "https://riab.luokuang.com/view/map/lk_map_online.json",
					center: center,
					zoom: zoom,
					minZoom:2,
					maxZoom:18,
                    dragRotate:false,
                    localIdeographFontFamily: "'Noto Sans', 'Noto Sans CJK SC', sans-serif"
				});
                map.touchZoomRotate.disableRotation();
				map.on("load",function(){
					
					poiContentManager = new LK.PoiContentManagerEx(map, {
						url: Config.poiContentUrl,
                        imgRootPath:"img/poicontent/",
                        radio:radio,
						poiContentClick:function(data){
							console.log(data);
							switch (data.content._data.mid){
								case 101:
									location.href = 'https://riab.luokuang.com/view/lk_share/track.html?fp_id='+ data.content._data.mid;
									break;	
								default:
									location.href = 'https://riab.luokuang.com/view/h5/v1/LUOKUANGOS/article/'+ data.content._data.mid +'?share=true';
									break;
							}
						},
                        poiClick:function (data) {
							console.log(data);
                        },
						redPacketClick:function (data) {
						    //红包点击
							console.log(data);
                        }
					});
					
                    poiContentManager.update();
					var landMarkManager = new LK.LandMarkManager(map);
					landMarkManager.requestData(Config.landMarkerUrl);

					document.getElementsByClassName('btns')[0].style.visibility = 'visible';
					//添加红包测试
                    addRedPacket();
                    mapLoaded = true;
                    if(posCenter){
                        showMap();
					}
					
				})
			}

            function getLocation() {
                setTimeout(function () {

                    posCenter = initCenter;
                    if(mapLoaded){
                        showMap();
					}
                },1000)
            }

			function showMap() {
			    //预请求数据
//                 map.jumpTo({
//                     center:posCenter,
//                     zoom:15
//                 })
//                 poiContentManager.update();

                //地图缩放到初始状态
                map.jumpTo({
                    center:initCenter,
                    zoom:3
                })

				//隐藏加载页面，显示地图
                var mapPane = document.getElementById("map");
                mapPane.style.visibility = "visible";
                var loading = document.getElementById("loading");
                loading.style.display = "none";

                //启动定位动画
                setTimeout(function () {
                    setLocation(true,2);
                },1000)
            }

			function refreshPoi() {
				poiContentManager.refresh();
			}

			function setLocation(bFirst,speed) {
                var posMarker = new Image();
                posMarker.src = "img/poicontent/pos.png";
                posMarker.width = 15;
                poiContentManager.setLocation(posCenter,posMarker,{bFirst:bFirst,speed:speed});
            }

            // 添加红包
            function addRedPacket(data) {
				data = {
                    mid:"aaaaa",
                    lng:116.39632000926127,
                    lat:39.902493883464786
				}
                poiContentManager.setRedPacketIcon({
                    redPacketUrl:"img/poicontent/redPacket.png",
                    redPacketWidth:101*radio,
                    redPacketHeight:115*radio,
				})
                poiContentManager.removeAllRedPacket();
                poiContentManager.update();
            }
			//获取URL参数
			//url
			function getQueryString(Str) {   
			   var url = Str;
			   var theRequest = new Object();   
			   if (url.indexOf("?") != -1) {   
				  var str = url.split('?')[1];
				  strs = str.split("&");  
				  for(var i = 0; i < strs.length; i ++) {   
					 theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]); 
				  }   
				  console.log(theRequest);
			   }   
			   return theRequest;   
			}				
		</script>

	</body>

</html>